<template>
  <div class="set">
    <!-- 标题 -->
    <div class="title">
      <span @click="$router.go(-1)"><van-icon name="arrow-left" /></span>
      <span style="font-weight: 600;">设置</span>
      <span></span>
    </div>
    <!--  -->
    <ul class="ul">
      <li style="border-bottom: 1px solid #ddd">
        <span>更换绑定手机号</span>
        <!-- <span>{{}}</span> -->
        <span><van-icon name="arrow" /></span>
      </li>
      <li style="border-bottom: 1px solid #ddd">
        <span>设置密码</span>
        <span><van-icon name="arrow" /></span>
      </li>
      <li style="border-bottom: 1px solid #ddd">
        <span>关于我们</span>
        <span><van-icon name="arrow" /></span>
      </li>
      <li style="">
        <span>上课短信通知</span>
        <van-switch
          v-model="checked"
          active-color="#f15a24"
          inactive-color="#dcdee0"
        />
      </li>
    </ul>
    <van-button color="#f15a24" hairline  plain>退出登录</van-button>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs } from "vue";
const checked = ref(true);
</script>
<style lang="scss" scoped>
.set {
  font-size: 20px;
  width: 100%;
  font-family: PingFangSC-Regular;
}
.title {
  background: #fff;
  display: flex;
  padding: 19px;
  
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  margin-bottom: 20px;
}
.ul {
  font-size: 16px;
  li {
    text-align: center;
    width: 95%;
    display: flex;
    justify-content: space-between;
    padding: 20px 15px;
    .van-icon {
      color: #999;
    }
  }
}
.van-button{
    width: 90%;
    margin-top: 150px;
    text-align: center;
    margin-left: 40px;
}
</style>